<!-- 发布租用订单 -->
<template>

  <div class="pag" >
    <div class="borrow-out-wrap">
      <div class="borrow-inputnum">
        <label>我要租用的数量</label>
        <m-number v-model="num"></m-number><span>块</span>
      </div>
      <div class="num-tip" v-if="vnum">求租中的订单 还有 <span>{{vnum}}</span> 块令牌没有租用到</div>
      <div class="borrow-inputnum">
        <label>预计租用时间</label>
        <m-number v-model="day"></m-number><span>天</span>
      </div>
      <div class="borrow-inputnum">
        <label>出让每日收益比例</label>
        <m-number v-model="per"></m-number><span>%</span>
      </div>
      <p class="textarea-info"><span>*</span>方框内填写1～100的整数</p>
      <textarea v-model="resume" viewneeded
                placeholder="可填写简要文字说明，例如机房规模，单节点盈利能力等，不可预留联系方式语言暴力等文字····" class="resume-input"></textarea>
      <p class="tip-info" v-if="buyOrderOverdueNum > 0">您的租借行为已发生<span>{{buyOrderOverdueNum}}</span>次违规，请慎重发单</p>
    </div>
    <div class="tip-info2">
      租赁交易在10点前（非订单发布时间）
      达成则计算当天收益分成
      10点后则从借入第二日开始计算收益分成
    </div>
    <div class="tip-info3">
      <span>*</span>若您的节点平均收益低于全网的平均收益，那么将按照全网节点的平均收益的数为基点 按照约定分成百分比分给出租人
    </div>
    <div class="pag-next" @click="nextStep">下一步</div>
    <!-- 缴纳保证金 -->
    <cube-popup  type="my-popup"   position="bottom"
                 :maskClosable="true" v-model="bondPopVisible">
      <div class="m-order">
        <div class="m-order-head">
          缴纳保证金
        </div>
        <div class="m-order-body">
          <div class="bond-tip">保证金不足，您需要缴纳保证金</div>
          <h2>{{ bondData.needCvnt }}<span class="d-cvnt">CVNT</span></h2>
          <div class="item-line">
            <span>租用令牌数量</span>
            <label>{{num}}块</label>
          </div>
          <div class="item-line">
            <span>保证金计算公式</span>
            <label>租用令牌数量*{{ bondData.day }}天*{{ bondData.unitCvnt }}CVNT</label>
          </div>
          <div class="bond-resume">
            收取保证金以确保协议分成顺利进行<br>将从保证金里面扣除收益分成给到出借人
          </div>
          <div @click="bondPopVisible=false" class="item-next">确认</div>
        </div>
      </div>
    </cube-popup>
    <!-- 令牌租借单详情 -->
    <cube-popup  type="my-popup"   position="bottom"
                 :maskClosable="true" v-model="popVisible">
      <div class="m-order">
        <div class="m-order-head">
          <img src="~assets/images/token/left.png" alt="" @click="popVisible=false">
          令牌租借单详情
        </div>
        <div class="m-order-body">
          <h2>我要租用令牌</h2>
          <div class="item-line">
            <span>租用数量</span>
            <label>{{num}}块</label>
          </div>
          <div class="item-line">
            <span>租用时间</span>
            <label>{{day}}天</label>
          </div>
          <div class="item-line">
            <span>出让收益比</span>
            <label>{{per}}%</label>
          </div>
          <div class="item-tip">
            <span>*</span>令牌借到手后，无论令牌是否用于挖矿，都会按照约定从保证金中返还给出借人分成奖励，当保证金内CVNT被发完并且没有及时增加，您租借的令牌将会强制还给出借人，并且您的行为将会被记录为一次违规。违规记录出现三次将不可以再使用租借令牌功能。
          </div>
          <div class="item-resume" v-show="averageRevenue > 0">您的节点日均产出为 <span>{{ averageRevenue }}CVNT</span>
            预计本单每租用到一块令牌每天
            将给出租人分得 <span>{{ averageRevenue * per / 100 }}CVNT</span></div>
          <div @click="confirmBorrowHandle" class="item-next">确认发布</div>
        </div>
      </div>
    </cube-popup>
    <!-- 出租令牌结果 -->
    <cube-popup  type="my-popup"   position="bottom"
                 :maskClosable="true" v-model="resultPopVisible">
      <div class="m-order">
        <div class="m-order-head">租用令牌发布结果</div>
        <div class="m-order-body">
<!--          <h2>租用令牌信息发布成功</h2>-->
          <div class="item-status">
            <img src="~assets/images/dealer/success.png" alt="">
            租用令牌信息发布成功
          </div>
          <div class="item-line">
            <span>租用数量</span>
            <label>{{num}}块</label>
          </div>
          <div class="item-line">
            <span>租用天数</span>
            <label>{{day}}天</label>
          </div>
          <div class="item-line">
            <span>出让收益比</span>
            <label>{{per}}%</label>
          </div>
<!--          <div class="item-line">-->
<!--            <span>缴纳保证金</span>-->
<!--            <label>{{day * num * 30}}CVNT</label>-->
<!--          </div>-->
          <div class="item-line">
            <span>订单号</span>
            <label>{{ orderNo }}</label>
          </div>
          <div @click="$router.replace({path: 'borrowpub'})" class="item-next">查看我的发布</div>
        </div>
      </div>
    </cube-popup>
    <payment ref="payment" @verifySuc="onVerifySuc" ></payment>
    <short-msg-popup ref="shortMsgPopup" :data="{scene: 'rentSubmitOrder'}" @submit="submit"></short-msg-popup>
  </div>

</template>

<script>

    import { rentSubmitOrder, getRentCheckDeposit, notRentNum, minerAverageRevenue} from 'api'
    import number from 'cpnts/number.vue'
    import payment from 'cpnts/payment.vue'
    import shortMsgPopup from 'cpnts/shortMsgPopup.vue'
    import {versions, isEmoji} from 'common/js/utl'
 let numReg = /^[1-9][0-9]*$/

  export default {
      components: {
          'payment': payment,
          'shortMsgPopup': shortMsgPopup,
          'mNumber': number,
      },
    data() {
      return {
          averageRevenue: 0,
          vnum: 0,
          bondData: {},
          orderNo: '',
          resume: '',
          per: null,
          day: null,
          num: null,
          bondPopVisible: false,
          popVisible: false,
          resultPopVisible: false
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        vm.resetData()
          vm.notRentNum()
          //vm.popVisible = true
      })
    },
      computed: {
          buyOrderOverdueNum(){
              let {tokenInfo} = this
              return tokenInfo.buyOrderOverdueNum
          },
          tokenInfo(){
              return  this.$store.state.tokenInfo
          }
      },
    methods: {
        async notRentNum(){
            try {
                let {data} = await  notRentNum({})
                this.vnum = data.num
            }catch (e) {
                //this.$warn(e.info)
            }

        },
        async getRentCheckDeposit(){
            if(this.isGetRentCheckDeposit){
                return
            }
            let {num} = this
            let rv
            this.isGetRentCheckDeposit = true
            try {
                let {data} = await  getRentCheckDeposit({num})
                //this.popVisible = true
                rv = {
                    status: true
                }
            }catch (e) {
                let {status, data} = e
                if(status == 20108){
                    rv = {
                        status: false,
                        data
                    }
                }else{
                    rv = {}
                    this.$warn(e.info)
                }

            }
            this.isGetRentCheckDeposit = false
            return  rv
        },
          resetData(){
            this.hidePayment()
              this.hideShortMsgPopup()
              this.popVisible = false
              this.resultPopVisible = false
              this.per = null
              this.day = null
              this.num = null
              this.resume = null
              this.averageRevenue = 0
          },
          validForm(){
              let {per, day, num, resume} = this
              if(!num){
                  this.$warn('请填写租用的数量')
                  return false
              }
              if(!day){
                  this.$warn('请填写租用时间')
                  return false
              }
              if(!per){
                  this.$warn('请填写收益比例')
                  return false
              }
              if(!resume){
                  this.$warn('请填写文字说明')
                  return false
              }
              if(num > 100){
                  this.$warn('租用的数量不能超过100')
                  return false
              }
              if(day < 5){
                  this.$warn('租用时间不能少于5天')
                  return false
              }
              if(day > 100){
                  this.$warn('租用时间不能超过100')
                  return false
              }
              if(per > 100){
                  this.$warn('收益比例不能超过100')
                  return false
              }
              if(isEmoji(resume)){
                  this.$warn('文字说明不能有表情符号')
                  return false
              }
              return  true
          },
          async nextStep(){
              if(!this.validForm()){
                  return
              }
              //this.resultPopVisible = true
              //this.bondPopVisible = true
              let {status, data} = await this.getRentCheckDeposit()
              if(status){
                  this.popVisible = true
                  let {data} = await minerAverageRevenue()
                  this.averageRevenue = data.averageRevenue
              }else if(status === false){
                  this.bondPopVisible = true
                  this.bondData = data
              }
              //this.popVisible = true
          },
        hidePayment(){
            this.$refs.payment.hide()
        },
        hideShortMsgPopup(){
            this.$refs.shortMsgPopup.hide()
        },
        onVerifySuc(data){
          this.hidePayment()
          this.$refs.shortMsgPopup.show()
            this.verifyToken = data.u
        },
      confirmBorrowHandle(){
          this.popVisible = false
          this.$refs.payment.show()
      },
        async submit(code){
            if(this.isSubmiting){
                return
            }
            let {verifyToken, num, day, per, resume} = this
            this.isSubmiting = true
            try {
                let {data} = await  rentSubmitOrder({
                    days: day,
                    scale: per,
                    info: resume,
                    num,
                    u: verifyToken,
                    code,
                })
                this.orderNo = data.orderNo
                this.hideShortMsgPopup()
                this.resultPopVisible = true
            }catch (e) {
                this.$warn(e.info)
            }
            this.isSubmiting = false

        },
      toastTip (info) {
        this.$warn(info)
      },
    }
  }
</script>

<style lang="scss" scoped>

  .pag {
    background: #F5F5FB;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  .borrow-out-wrap {
    //width:690px;
    //height:782px;
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 4px 0px rgba(10,29,87,0.3);
    border-radius:10px;
    margin: 30px;
    padding: 30px;
    input,textarea {
      &:focus {
        border-color:rgba(23,62,143,1);
      }
    }
  }

  .borrow-inputnum {
    display: flex;
    align-items: center;
    font-size:32px;
    color:rgba(32,44,91,1);
    background: #fff;
    height: 106px;
    margin-bottom: 30px;
    label {
      flex: 1;
    }
    input {
      width:236px;
      height:86px;
      background:rgba(248,248,248,1);
      border:2px solid rgba(227,227,227,1);
      border-radius:8px;
      margin-right: 16px;
      text-align: center;
    }
  }


  .textarea-info {
    font-size:26px;
    color: #71768C;
    text-align: center;
    margin-bottom: 30px;
    span {
      color:rgba(235,50,87,1);
    }
  }

  .resume-input {
    width:630px;
    height:240px;
    background:rgba(255,255,255,1);
    border:2px solid rgba(227,227,227,1);
    border-radius:8px;
    margin: 0 auto;
    padding: 23px 12px 23px 20px;
    line-height:45px;
    font-size: 30px;
    color:rgba(32,44,91,1);
    outline: none;
    &::-webkit-input-placeholder {
      color: #BCBCBC;
    }
  }

  .tip-info {
    margin-top: 43px;
    padding-bottom: 11px;
    text-align: center;
    font-size:26px;
    color:rgba(113,118,140,1);
    span {
      color:rgba(235,50,87,1);
    }
  }

  .tip-info2 {
    white-space: pre-line;
    text-align: center;
    font-size:26px;
    line-height:39px;
    color: #456BBA;
  }

  .tip-info3 {
    width:675px;
    font-size:26px;
    color:#71768C;
    line-height:39px;
    margin: 30px auto 0 auto;
    span {
      color: #EB3257;
    }
  }

  .num-tip {
    font-size:24px;
    color: #fff;
    text-align: right;
    padding-right: 44px;
    margin-bottom: 13px;
    height:64px;
    width: calc(100% + 60px);
    transform: translateX(-30px);
    background:rgba(255,164,163,1);
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      padding: 0 5px;
    }
  }


  .pag-next {
    height:88px;
    background:rgba(23,62,143,1);
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:34px;
    color:rgba(255,255,255,1);
  }

  .bond-tip {
    text-align: center;
    margin-bottom: 53px;
  }

  .d-cvnt {
    font-size: 30px;
    margin-left: 5px;
  }

  .bond-resume {
    margin-top: 185px;
    text-align: center;
    font-size:26px;
    color:rgba(113,118,140,1);
    line-height:39px;
    //margin-bottom: 53px;
  }

  //=====================

  .m-order {
    //height:1000px;
    background:rgba(255,255,255,1);
  }

  .m-order-head {
    height: 88px;
    border-bottom: 1px solid #F5F5F5;
    font-size:34px;
    color:rgba(32,44,91,1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    img {
      position: absolute;
      left: 30px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 34px;
    }


  }

  .m-order-body {
    padding: 32px;
    h2 {
      font-size:50px;
      font-weight:600;
      color:rgba(32,44,91,1);
      text-align: center;
      margin-bottom: 28px;
    }
  }


  .item-line {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ECECEC;
    font-size:28px;
    color:rgba(113,118,140,1);
    label {
      color: #202C5B;
    }
  }


  .item-tip {
    width:675px;
    font-size:26px;
    color:#71768C;
    line-height:39px;
    margin: 30px auto 49px auto;
    span {
      color: #EB3257;
    }
  }


  .item-resume {
    width:690px;
    height:164px;
    border:2px solid rgba(192,199,212,1);
    border-radius:10px;
    margin: 0 auto;
    font-size:26px;
    color:rgba(69,107,186,1);
    line-height:39px;
    //display: flex;
    //align-items: center;
    //justify-content: center;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    white-space: pre-line;
    span {
      color:rgba(235,50,87,1);
    }
  }

  .item-next {
    width:690px;
    height:84px;
    background:rgba(23,62,143,1);
    border-radius:8px;
    margin: 40px auto 0 auto;
    font-size:32px;
    color:rgba(255,255,255,1);
    display: flex;
    align-items: center;
    justify-content: center;
  }


  .item-status {
    padding-top: 15px;
    text-align: center;
    font-size:28px;
    color:rgba(32,44,91,1);
    margin-bottom: 33px;
    img {
      width: 80px;
      height: 80px;
      display: block;
      margin: 0 auto 41px auto;
    }
  }


  //==========================
</style>













